<template>
    <div class="set-about">
        <div class="about">
            <img :src="about">
        </div>
        <div>
            <!--图片地址:<input v-model="about" type="text" >-->
            <button class="edit" @click="setImage()">修改</button>
        </div>
    </div>
</template>
<script>
    import imageSelect from 'admin/js/common/image-select.vue';

    export default{
        data() {
            return {
                about: ''
            }
        },
        methods: {
            setImage(){
                var self = this;
                //这是个动态实时加载的组件
                var imageS = Vue.extend(imageSelect);
                imageS = new imageS;

                imageS.temp = {
                    config: {
                        title: '图片选择',
                        content: '',
                        style: {
                            width: 920
                        }
                    }
                };

                imageS.item_img = self.about;

                $(".app").append(imageS.$mount().$el);
                imageS.$on("pic-change", function (item_img) {
                    self.about = item_img;
                    self.save();
                });

            },
            save(){
                var self = this;

                $.ajax({
                    type: 'POST',
                    url: CFG.api.mac.saveAbout,
                    dataType: 'json',
                    data: {
                        src: self.about
                    },
                    error: function (error) {
                        //alert(JSON.stringify(error));
                    },
                    success: function (response) {
                        if (response.err) {
                            //alert(response.err.msg);
                            //response.err.sub_msg = decodeURIComponent(response.err.sub_msg);
                            //fn.tx(response);
                        } else {

                        }
                    }
                });
            },
            getAbout:function(){
                var self = this;
                $.ajax({
                    type: 'POST',
                    url: CFG.api.mac.getAbout,
                    dataType: 'json',
                    data: {},
                    error: function (error) {
                        //alert(JSON.stringify(error));
                    },
                    success: function (response) {
                        if (response.err) {
                            //alert(response.err.msg);
                            //response.err.sub_msg = decodeURIComponent(response.err.sub_msg);
                            //fn.tx(response);
                        } else {
                            self.about = response.data;
                        }
                    }
                });
            }
        },
        created(){
            this.getAbout();
        },
        components: {
            imageSelect
        }

    }
</script>

<style lang="less">
    .set-about {
        position: relative;
        text-align: center;

        .about{
            padding: 10px 0 30px 0;

            img{
                width: 1000px;
                height: 562px;
            }
        }

    }
</style>

